<template>
    <div>
        <!-- <div id="introduce">
            <p>组件目录结构：</p>
            <p>TodoComponent -> TodoHeader,TodoMain</p>
            <p>TodoMain - > TodoArticle,TodoItem</p>
        </div> -->
        <div id="todoComponent">
            <Header />
            <Main :plans="plans"/>
        </div>
    </div>
    
</template>

<script setup>
import Header from './TodoHeader.vue'
import Main from './TodoMain.vue'

const plans = JSON.parse(window.localStorage.getItem("plans")) || []

</script>

<style scoped>
    #introduce{
        position: absolute;
        top: 20%;
        width: 14%;
        font-size: 10px;
    }
    #todoComponent{
        width: 70%;
        height: 95vh;
        margin-left: 15%;
        background: linear-gradient(#00afa1, rgba(255, 192, 203, 0.806));
    }

</style>